<form nz-form nzLayout="vertical" [formGroup]="validateForm">
  <nz-form-item>
    <nz-form-label nzRequired>      
      {{ l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.TableColumn.SegmentType') }}
    </nz-form-label>
    <nz-form-control>
      <nz-select 
        formControlName="key"
        (ngModelChange)="onSegmentTypeChange($event)"
        [nzPlaceHolder]="l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.Dialog.SegmentType.PlaceHolder')"
      >
        <nz-option 
          *ngFor="let type of segmentTypes" 
          [nzValue]="type.value"
          [nzLabel]="l('BasicArchives::UI:UniqueCodeSetting.SegmentType.' + type.value)"
        ></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item *ngIf="validateForm.get('key').value">
    <nz-form-label nzRequired>
      {{ l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.TableColumn.Configration') }}
    </nz-form-label>
    <nz-form-control>
      <div class="configuration-container">
        <dynamic-segment-configuration
          [type]="validateForm.get('key').value"
          [configuration]="validateForm.get('configration').value"
          (configurationChange)="validateForm.patchValue({configration: $event})"
          (validityChanged)="onConfigValidityChanged($event)"
        ></dynamic-segment-configuration>
      </div>
    </nz-form-control>
  </nz-form-item>

  <div class="modal-footer">
    <button nz-button (click)="cancel()">
      {{ l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.Dialog.Button.Cancel') }}
    </button>
    <button nz-button nzType="primary" [disabled]="!validateForm.valid || !isConfigValid" (click)="submitForm()">
      {{ l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.Dialog.Button.Submit') }}
    </button>
  </div>
</form> 